<template>
  <div class="index">

    <div class="center">
      <left></left>
      <div class="right">
        <top></top>
        <div class="hei10"></div>
        <div class="where" style="background: #fff; padding: 10px 30px; font-size: 14px; color: #595959;">
          当前位置：
          <router-link to="/index" style="color: #409eff;">分销后台</router-link>>
          <router-link to="/wodezhanghu/wodezhanghu" style="color: #409eff;">我的账户</router-link>>
          消费记录
        </div>

        <div class="hei10"></div>

        <div class="title">消费记录</div>
        <div class="kflexc con" style="padding-bottom: 0;">
          <div @click="changetype('gth')" :class="source == 'gth'?'tyact':'tyact2'">敢探号消费记录</div>
          <div @click="changetype('xlh')" :class="source == 'xlh'?'tyact':'tyact2'">小螺号消费记录</div>
        </div>
        <div class="con" v-loading="loading">
          <div class="flex">
            <el-select v-model="type" placeholder="请选择" clearable style="margin-right: 20px;">
              <el-option label="平台福利" value="benefit" v-if="source == 'gth'"></el-option>
              <el-option label="订单扣费" value="plan_order_free" v-if="source == 'gth'"></el-option>
              <el-option label="增值服务" value="vdService" v-if="source == 'gth'"></el-option>
              <el-option label="身份证校验" value="identityVerify" v-if="source == 'gth'"></el-option>
              <el-option label="短信通知" value="smsNotify" v-if="source == 'gth'"></el-option>
              <el-option label="自动转单" value="auto_order_transfer" v-if="source == 'gth'"></el-option>
              <el-option label="物流查询" value="trackQuery" v-if="source == 'gth'"></el-option>
              <el-option label="模拟人工接口" value="mock_manual_order" v-if="source == 'gth'"></el-option>

              <el-option label="短信费" value="xldVdService" v-if="source == 'xlh'"></el-option>
              <el-option label="订单费" value="xlhOrder" v-if="source == 'xlh'"></el-option>

              
            </el-select>
            <el-date-picker v-model="time" @change="choosetime" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange"
              range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
            <el-button type="danger" round style="padding: 9px 15px" size="small" @click="getlist">查询</el-button>
            <el-button type="danger" round plain size="small" @click="exportData">导出明细</el-button>
          </div>

          <div class="list">
            <!-- <div class="th">序号</div> -->
            <div class="th">订单ID</div>
            <div class="th">分销商</div>
            <div class="th">订单来源</div>

            <div class="th" v-if="source == 'gth'">增值收费</div>
            <div class="th" v-if="source == 'xlh'">订单类型</div>


            <div class="th">外部订单号</div>
            <!-- <div class="th">产品编码</div> -->
            <div class="th">费用</div>
            <div class="th">扣费时间</div>
          </div>
          <div class="list" v-for="item in list" :key="item.id">
            <!-- <div class="td">{{item.order_id}}</div> -->
            <div class="td">{{item.order_id}}</div>
            <div class="td">{{item.merchant_name}}</div>
            <div class="td">{{item.source}}</div>

            <div class="td" v-if="source == 'gth'">{{item.label}}</div>
            <div class="td" v-if="source == 'xlh'">{{item.fee_type}}</div>


            <div class="td">{{item.source_id}}</div>
            <!-- <div class="td">{{item.mobile}}</div> -->
            <div class="td">{{item.amount}}</div>
            <div class="td">{{item.created_at}}</div>
          </div>
          <el-pagination background layout="total,prev, pager, next" :current-page="page" @current-change="fanye"
            :page-size="pagesize" :total="total"></el-pagination>
        </div>
      </div>
    </div>
    <!-- <foot></foot> -->
  </div>

</template>

<script>
  import axios from 'axios'
  import top from '@/components/top.vue'
  import left from '@/components/left.vue'
  import foot from '@/components/foot.vue'
  export default {
    components: {
      "left": left,
      "top": top,
      "foot": foot
    },
    name: "xiaofeimingxi",
    data() {
      return {
        pagesize: 20,
        total: 0,
        page: 1,
        list: [],
        loading: true,
        start: "",
        end: "",
        time: "",
        type: "",
        source:'gth'

      }
    },
    created() {
      this.getlist()
    },
    mounted() {

    },
    methods: {
      changetype:function(val){

        this.source = val
        this.type = ''
        this.getlist()
      },
      exportData() {
        this.$router.push({
          path: '/wodezhanghu/xiaofeimingxidaochu'
        })
      },
      //时间
      choosetime: function() {
        if (this.time == null) {
          this.start = ""
          this.end = ""
        } else {
          this.start = this.time[0]
          this.end = this.time[1]
        }
      },
      fanye: function(page) {
        this.loading = true
        this.page = page
        this.getlist()
      },
      getlist: function() {
        this.loading = true
        axios.get('/api/plan-market/shop/transaction?page=' + this.page + '&start=' + this.start + '&end=' + this.end + '&type=' + this.type + '&source=' + this.source)
          .then(response => {
            if (response.data.msg.code == 0) {
              this.list = response.data.data.data
              this.total = response.data.data.total
              this.loading = false
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .index {
    .tyact{ position: relative; margin-right: 20px; padding-bottom: 15px; color: #2974FF; font-size: 16px; cursor: pointer;
      &::after{
        content: '';
        position: absolute;
        left: 50%;
        bottom: 0;
        margin-left: -10px;
        height: 2px;
        width: 20px;
        background: #2974FF;

      }
    }
    .tyact2{ position: relative; margin-right: 20px; padding-bottom: 15px; color: rgb(51, 51, 51); font-size: 16px; cursor: pointer;
      &::after{
        content: '';
        position: absolute;
        left: 50%;
        bottom: 0;
        margin-left: -10px;
        height: 2px;
        width: 20px;
        background: #fff;
      }
    }
    /deep/ .el-button--danger {
        color: #FFF;
        background-color: #2974FF;
        border-color: #2974FF;
    }
    /deep/ .el-button--danger.is-plain {
        color: #EEF7FF !important;
        background: #EEF7FF !important;
        border-color: #18A0FB !important;
    }

    .title {
      border-bottom: 1px #EAEAEA solid;
      line-height: 45px;
      padding-left: 30px;
      font-size: 16px;
      background: #F9F9F9;
      color: #727272
    }

    .con {
      padding: 20px;

      .flex {
        display: flex;
        margin-bottom: 20px;

        .el-date-editor {
          margin-right: 20px;
        }
      }

      .list {
        display: flex;
        text-align: center;
        color: #727272;
        line-height: 45px;
        border: 1px #EAEAEA solid;
        margin-top: -1px;

        .th {
          flex: 1;
          background: #F9F9F9;
          font-size: 14px;
          border-right: 1px #EAEAEA solid;
        }

        .td {
          flex: 1;
          font-size: 14px;
          border-right: 1px #EAEAEA solid;
          overflow: hidden;
        }
      }

      .el-pagination {
        text-align: right;
        margin: 20px 0;
      }
    }


  }
</style>
